<script setup>
import { ref, onMounted } from "vue";
defineProps({
  count: Number,
  total: Number,
  currentPage: Number,
  pageSize: Number,
});
// const handleCurrentChange = defineEmits(["handleCurrentChange"]);

//分页

let page = 1;
const changePage = defineEmits(["handleCurrentChange", "handleSizeChange"]);

const SizeChange = (val) => {
  let count = val;
  console.log(count);
  changePage("handleSizeChange", count);
};

const CurrentChange = (val) => {
  page = val;
  // console.log(`current page: ${page}`);
  changePage("handleCurrentChange", page);
};

onMounted(() => {
  // console.log(changePage);
  // changePage("handleCurrentChange", page);
});
</script>
<template>
  <el-pagination
    v-model:currentPage="currentPage"
    v-model:page-size="count"
    :page-sizes="[5, 10, 15, 20]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="SizeChange"
    @current-change="CurrentChange"
  />
</template>
